<template>
  <a-form-item :label="formItem.label" :rules="[formItem.rule]" :extra="formItem.extra"
    :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
    <!-- <a-cascader :disabled="formItem.disabled" :style="{ width: formItem.width ? formItem.width + 'px' : '' }"
      :options="areaData" :placeholder="formItem.placeholder" changeOnSelect v-model:value="formItem.value" :fieldNames="{
        children: 'children', label: 'areaName', value: 'areaCode'
      }" />
    <a-input :disabled="formItem.disabled" placeholder=" 请输入详细地址" v-model:value="formItem.addressDetail_value" show-clear
      class="addressDetail"></a-input>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div> -->
    <a-form-item :name="props.formNamePath" :rules="[formItem.rule]">
      <a-cascader :disabled="formItem.disabled" :style="{ width: formItem.width ? formItem.width + 'px' : '' }"
        :options="areaData" :placeholder="formItem.placeholder" changeOnSelect v-model:value="formItem.value" :fieldNames="{
          children: 'children', label: 'areaName', value: 'areaCode'
        }" />
    </a-form-item>

    <a-form-item :name="addressDetail" :rules="[formItem.rule]">
      <a-input style="width: 304px;" :disabled="formItem.disabled" placeholder="请输入详细地址" v-model:value="formItem.addressDetail_value"
        show-clear :class="!props.formNamePath ? 'addressDetail' : ''"></a-input>
      <div class="help-msg" v-if="formItem.helpMsg">
        {{ formItem.helpMsg }}
      </div>
    </a-form-item>
  </a-form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from "vue"
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';
import { dataSourceType } from "@/type.d";
import request from "@/api/index";
const emit = defineEmits(['parentValue'])
//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
  formNamePath: [] as any[]
})
let addressDetail = ref<any[]>([]);
if (props.formNamePath && props.formNamePath[0]) {
  addressDetail.value = [props.formNamePath[0], 'addressDetail_value']
}

const queryParam = ref({
  orgId: '',
  teamId: '',
})
const onChange = (value: any) => {
  formItem.value = value;
  emit('parentValue', formItem.value)
};
const filter = (inputValue: any, path: any) => {
  return path.some((option: any) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
};
const displayRender = ({ labels, selectedOptions }: { labels: any; selectedOptions: any }) => {

};
const areaData = ref<dataSourceType[]>([]);
const formItem: any = ref(props.formItem as any);
useColumnItem(computed(() => props.formItem), formItem)






// methods
// 获取区域树
const getAreaTree = () => {
  request.getAreaTree().then((res: dataSourceType[]) => {
    areaData.value = areaData.value.concat(res);
  })
}
onMounted(() => {
  getAreaTree()
})
</script>

<style lang="less" scoped>
::v-deep(.ant-checkbox-group) {
  display: flex;
}

.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}

.addressDetail {
  margin-top: 12px;
}
</style>